<template>
  <div class="exchange-page">
    <el-card>
      <template #header>
        <div class="card-header">
          <span class="title">🎁 积分兑换管理</span>
          <el-button type="primary" @click="handleAdd">
            <el-icon><Plus /></el-icon>
            新增兑换商品
          </el-button>
        </div>
      </template>

      <!-- 兑换统计 -->
      <el-row :gutter="20" class="stat-cards">
        <el-col :span="6">
          <el-statistic title="兑换商品数" :value="56" />
        </el-col>
        <el-col :span="6">
          <el-statistic title="今日兑换" :value="234" />
        </el-col>
        <el-col :span="6">
          <el-statistic title="累计兑换" :value="15678" />
        </el-col>
        <el-col :span="6">
          <el-statistic title="消耗积分" :value="2345678" />
        </el-col>
      </el-row>

      <!-- 商品分类 -->
      <el-tabs v-model="activeCategory">
        <el-tab-pane label="全部" name="all" />
        <el-tab-pane label="实物商品" name="physical" />
        <el-tab-pane label="电子券" name="voucher" />
        <el-tab-pane label="服务" name="service" />
      </el-tabs>

      <!-- 商品列表 -->
      <el-row :gutter="20">
        <el-col :xs="24" :sm="12" :md="8" :lg="6" v-for="item in exchangeItems" :key="item.id">
          <el-card class="exchange-card" shadow="hover">
            <div class="item-image">
              <img :src="item.image" v-if="item.image" alt="商品图片" />
              <div v-else class="image-placeholder">
                <el-icon :size="48"><Present /></el-icon>
              </div>
              <div class="item-badge" v-if="item.hot">
                <el-tag type="danger" size="small">热门</el-tag>
              </div>
            </div>
            <div class="item-info">
              <h4 class="item-name">{{ item.name }}</h4>
              <div class="item-points">
                <span class="points-value">{{ item.points }}</span>
                <span class="points-label">积分</span>
              </div>
              <div class="item-stock">
                库存: <span :class="item.stock < 10 ? 'low-stock' : ''">{{ item.stock }}</span>
              </div>
              <div class="item-exchange">
                已兑换: {{ item.exchangeCount }}
              </div>
            </div>
            <div class="item-actions">
              <el-button type="primary" size="small" @click="handleExchange(item)">
                立即兑换
              </el-button>
              <el-button size="small" @click="handleEdit(item)">
                编辑
              </el-button>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </el-card>

    <!-- 兑换记录 -->
    <el-card style="margin-top: 20px;">
      <template #header>
        <span>兑换记录</span>
      </template>
      <el-table :data="exchangeRecords" border stripe>
        <el-table-column prop="orderNo" label="兑换单号" width="150" />
        <el-table-column prop="memberName" label="会员姓名" width="120" />
        <el-table-column prop="itemName" label="兑换商品" width="200" />
        <el-table-column prop="points" label="消耗积分" width="100">
          <template #default="{ row }">
            <span style="color: #f56c6c; font-weight: bold;">{{ row.points }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="quantity" label="数量" width="80" />
        <el-table-column prop="exchangeTime" label="兑换时间" width="160" />
        <el-table-column prop="status" label="状态" width="100">
          <template #default="{ row }">
            <el-tag :type="getStatusTag(row.status)">
              {{ getStatusText(row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="150">
          <template #default="{ row }">
            <el-button 
              v-if="row.status === 'pending'" 
              link 
              type="success" 
              @click="handleDeliver(row)"
            >
              发货
            </el-button>
            <el-button link type="danger" @click="handleCancel(row)">取消</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 兑换对话框 -->
    <el-dialog v-model="exchangeDialogVisible" title="积分兑换" width="600px">
      <el-form :model="exchangeForm" label-width="100px">
        <el-form-item label="兑换商品">
          <el-input :value="currentItem?.name" disabled />
        </el-form-item>
        <el-form-item label="所需积分">
          <span style="color: #f56c6c; font-weight: bold; font-size: 18px;">
            {{ currentItem?.points }}积分
          </span>
        </el-form-item>
        <el-form-item label="选择会员">
          <el-select v-model="exchangeForm.memberId" filterable>
            <el-option label="张三 (积分: 8956)" value="M10001" />
            <el-option label="李四 (积分: 5678)" value="M10002" />
          </el-select>
        </el-form-item>
        <el-form-item label="兑换数量">
          <el-input-number v-model="exchangeForm.quantity" :min="1" :max="currentItem?.stock" />
        </el-form-item>
        <el-form-item label="总计积分">
          <span style="color: #409eff; font-weight: bold; font-size: 20px;">
            {{ (currentItem?.points || 0) * exchangeForm.quantity }}积分
          </span>
        </el-form-item>
        <el-form-item label="收货地址">
          <el-input v-model="exchangeForm.address" type="textarea" :rows="2" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="exchangeDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleExchangeSubmit">确认兑换</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { Plus, Present } from '@element-plus/icons-vue'

const activeCategory = ref('all')

const exchangeItems = ref([
  { id: 1, name: 'AirPods Pro 2', points: 8000, stock: 50, exchangeCount: 234, hot: true, image: '', category: 'physical' },
  { id: 2, name: '50元代金券', points: 500, stock: 999, exchangeCount: 1234, hot: true, image: '', category: 'voucher' },
  { id: 3, name: 'iPad保护套', points: 2000, stock: 100, exchangeCount: 456, hot: false, image: '', category: 'physical' },
  { id: 4, name: '100元礼品卡', points: 1000, stock: 999, exchangeCount: 789, hot: false, image: '', category: 'voucher' }
])

const exchangeRecords = ref([
  { orderNo: 'EX202401001', memberName: '张三', itemName: 'AirPods Pro 2', points: 8000, quantity: 1, exchangeTime: '2024-01-20 14:30', status: 'delivered' },
  { orderNo: 'EX202401002', memberName: '李四', itemName: '50元代金券', points: 500, quantity: 1, exchangeTime: '2024-01-20 10:15', status: 'completed' },
  { orderNo: 'EX202401003', memberName: '王五', itemName: 'iPad保护套', points: 2000, quantity: 1, exchangeTime: '2024-01-19 16:20', status: 'pending' }
])

const exchangeDialogVisible = ref(false)
const currentItem = ref(null)

const exchangeForm = reactive({
  memberId: '',
  quantity: 1,
  address: ''
})

const getStatusTag = (status) => {
  const map = { pending: 'warning', delivered: 'primary', completed: 'success', cancelled: 'info' }
  return map[status] || 'info'
}

const getStatusText = (status) => {
  const map = { pending: '待发货', delivered: '已发货', completed: '已完成', cancelled: '已取消' }
  return map[status] || status
}

const handleAdd = () => {
  ElMessage.info('新增兑换商品')
}

const handleExchange = (item) => {
  currentItem.value = item
  exchangeDialogVisible.value = true
}

const handleExchangeSubmit = () => {
  ElMessage.success('兑换成功')
  exchangeDialogVisible.value = false
}

const handleEdit = () => {
  ElMessage.info('编辑商品')
}

const handleDeliver = () => {
  ElMessage.success('发货成功')
}

const handleCancel = () => {
  ElMessage.success('已取消兑换')
}
</script>

<style scoped>
.exchange-page {
  padding: 20px;
  background: #f5f5f5;
  min-height: 100vh;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.title {
  font-size: 18px;
  font-weight: bold;
}

.stat-cards {
  margin-bottom: 20px;
  padding: 20px;
  background: white;
  border-radius: 8px;
}

.exchange-card {
  margin-bottom: 20px;
  transition: all 0.3s;
}

.exchange-card:hover {
  transform: translateY(-5px);
}

.item-image {
  height: 150px;
  background: #f5f7fa;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: -20px -20px 15px;
  position: relative;
}

.item-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-placeholder {
  color: #909399;
}

.item-badge {
  position: absolute;
  top: 10px;
  right: 10px;
}

.item-name {
  margin: 0 0 10px 0;
  font-size: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.item-points {
  margin-bottom: 10px;
}

.points-value {
  color: #f56c6c;
  font-size: 24px;
  font-weight: bold;
}

.points-label {
  margin-left: 5px;
  color: #909399;
}

.item-stock, .item-exchange {
  font-size: 13px;
  color: #606266;
  margin-bottom: 5px;
}

.low-stock {
  color: #f56c6c;
  font-weight: bold;
}

.item-actions {
  margin-top: 15px;
  display: flex;
  gap: 8px;
}
</style>

